<template>
  <div>
    <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpuInfo">添加SPU</el-button>
    <el-table :data="spuList" border style="margin-top:10px">
      <el-table-column label="序号" type="index" align="center" width="80px" />
      <el-table-column label="SPU名称" prop="spuName" />
      <el-table-column label="SPU描述" prop="description" />
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-tooltip content="添加SKU" placement="top">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSkuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="更新SPU" placement="top">
            <el-button type="warning" icon="el-icon-edit" size="mini" @click="editSpuInfo(row)" />
          </el-tooltip>
          <el-tooltip content="查看SKU列表" placement="top" style="margin-right:10px">
            <el-button type="info" icon="el-icon-info" size="mini" @click="getSkuList(row)" />
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项SPU吗？" @onConfirm="deleteSpuInfo(row,$index)">
            <el-tooltip slot="reference" content="删除SPU" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="currentPage" align="center" :page-sizes="[3,5,10,20]" :page-size="limit" layout=" prev, pager, next, jumper,->,sizes,total" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 查看SKU列表之弹出框 -->
    <el-dialog title="SKU列表" :visible.sync="dialogTableVisible">
      <el-table :data="skuList" border>
        <el-table-column property="skuName" label="名称" width="150" />
        <el-table-column property="price" label="价格" width="200" />
        <el-table-column property="skuDesc" label="描述" />
        <el-table-column label="默认图片">
          <template v-slot="{row}">
            <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { reqDeleteSpuInfo, reqGetSpuList } from '@/api/product/spu'
import { mapMutations, mapState } from 'vuex'
import { reqGetSkuList } from '@/api/product/sku'
export default {
  name: 'SpuList',
  data() {
    return {
      currentPage: 1,
      limit: 5,
      spuList: [],
      skuList: [],
      total: 0,
      dialogTableVisible: false
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  watch: {
    category3Id: {
      immediate: true,
      handler() {
        this.getSpuList()
      }
    }
  },
  mounted() {},
  methods: {
    ...mapMutations('spu', ['SET_SPU_INFO']),
    // 1. 封装一个获取当前页面中spu列表的方法
    async getSpuList() {
      const { currentPage: page, limit, category3Id } = this
      const result = await reqGetSpuList({ page, limit, category3Id })
      if (result.code === 200) {
        this.spuList = result.data.records
        this.total = result.data.total
      }
    },
    // 2. 编辑SPU
    editSpuInfo(row) {
      this.$emit('update:visible', 2)

      // console.log('spuList', row)
      // 传递数据
      // this.$emit('setSpuInfo', row)
      this.$emit('setSpuInfo', {
        ...row,
        spuImageList: [],
        spuSaleAttrList: []
      })
    },
    // 3. 删除当前那条spu对象
    async deleteSpuInfo(row) {
      const result = await reqDeleteSpuInfo(row.id)
      if (result.code === 200) {
        this.$message.success('删除一条spu数据成功...')
        this.getSpuList()
      } else {
        this.$message.error('删除一条spu数据失败...')
      }
    },
    // 4. 添加sku对象
    addSkuInfo(row) {
      this.$emit('update:visible', 3)

      // 设置SPUId与spuName
      this.SET_SPU_INFO(row)
    },
    // 5. 添加SpuInfo
    addSpuInfo() {
      this.$emit('update:visible', 2)

      // this.$emit('setSpuInfo', {
      //   spuImageList: [],
      //   spuSaleAttrList: []
      // })

      this.$emit('setSpuInfo', {})
    },
    // 6. 查看Sku列表
    async getSkuList(row) {
      // 要显示弹出框
      this.dialogTableVisible = true
      // 发送请求获取数据
      const result = await reqGetSkuList(row.id)
      if (result.code === 200) {
        this.skuList = result.data
      } else {
        this.$message({
          type: 'error',
          message: '获取sku列表失败'
        })
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.limit = val
      this.getSpuList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getSpuList()
    }
  }
}
</script>

<style>
</style>
